<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset='utf-8'>
  <title>导航</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  #canvas {
    background-color: #000;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
  }

  .list {
    padding: 30px;
  }

  p a {
    font-size: 16px;
    color: #fff;
    line-height: 30px;
  }
</style>

<body>
  <canvas id="canvas"></canvas>
  <div class="list">
    <p><a href="/tools" target="_blank">js、css压缩</a></p>
    <p><a href="/navigator" target="_blank">设备信息</a></p>
    <p><a href="/fontEditor" target="_blank">文字编辑</a></p>
    <p><a href="/vue2" target="_blank">vue2文档</a></p>
    <p><a href="/vue3" target="_blank">vue3文档</a></p>
    <p><a href="/game" target="_blank">游戏列表</a></p>
  </div>
</body>
<script>
  (function (window) {
    function Dotline(option) {
      this.opt = this.extend({
        dom: 'canvas',//画布id
        cw: 1000,//画布宽
        ch: 500,//画布高
        ds: 100,//点的个数
        r: 0.5,//圆点半径
        cl: '#fff',//颜色
        dis: 100//触发连线的距离
      }, option);
      this.c = document.getElementById(this.opt.dom);//canvas元素id
      this.ctx = this.c.getContext('2d');
      this.c.width = this.opt.cw;//canvas宽
      this.c.height = this.opt.ch;//canvas高
      this.dotSum = this.opt.ds;//点的数量
      this.radius = this.opt.r;//圆点的半径
      this.disMax = this.opt.dis * this.opt.dis;//点与点触发连线的间距
      this.color = this.color2rgb(this.opt.cl);//设置粒子线颜色
      this.dots = [];
      //requestAnimationFrame控制canvas动画
      var RAF = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
      };
      var _self = this;
      //增加鼠标效果
      var mousedot = { x: null, y: null, label: 'mouse' };
      this.c.onmousemove = function (e) {
        var e = e || window.event;
        mousedot.x = e.clientX - _self.c.offsetLeft;
        mousedot.y = e.clientY - _self.c.offsetTop;
      };
      this.c.onmouseout = function (e) {
        mousedot.x = null;
        mousedot.y = null;
      }
      //控制动画
      this.animate = function () {
        _self.ctx.clearRect(0, 0, _self.c.width, _self.c.height);
        _self.drawLine([mousedot].concat(_self.dots));
        RAF(_self.animate);
      };
    }
    Dotline.prototype.extend = function (o, e) {
      for (var key in e) {
        if (e[key]) {
          o[key] = e[key]
        }
      }
      return o;
    };
    Dotline.prototype.color2rgb = function (colorStr) {
      var red = null,
        green = null,
        blue = null;
      var cstr = colorStr.toLowerCase();//变小写
      var cReg = /^#[0-9a-fA-F]{3,6}$/;//确定是16进制颜色码
      if (cstr && cReg.test(cstr)) {
        if (cstr.length == 4) {
          var cstrnew = '#';
          for (var i = 1; i < 4; i++) {
            cstrnew += cstr.slice(i, i + 1).concat(cstr.slice(i, i + 1));
          }
          cstr = cstrnew;
        }
        red = parseInt('0x' + cstr.slice(1, 3));
        green = parseInt('0x' + cstr.slice(3, 5));
        blue = parseInt('0x' + cstr.slice(5, 7));
      }
      return red + ',' + green + ',' + blue;
    }
    //画点
    Dotline.prototype.addDots = function () {
      var dot;
      for (var i = 0; i < this.dotSum; i++) {//参数
        dot = {
          x: Math.floor(Math.random() * this.c.width) - this.radius,
          y: Math.floor(Math.random() * this.c.height) - this.radius,
          ax: (Math.random() * 2 - 1) / 1.5,
          ay: (Math.random() * 2 - 1) / 1.5
        }
        this.dots.push(dot);
      }
    };
    //点运动
    Dotline.prototype.move = function (dot) {
      dot.x += dot.ax;
      dot.y += dot.ay;
      //点碰到边缘返回
      dot.ax *= (dot.x > (this.c.width - this.radius) || dot.x < this.radius) ? -1 : 1;
      dot.ay *= (dot.y > (this.c.height - this.radius) || dot.y < this.radius) ? -1 : 1;
      //绘制点
      this.ctx.beginPath();
      this.ctx.arc(dot.x, dot.y, this.radius, 0, Math.PI * 2, true);
      this.ctx.stroke();
    };
    //点之间画线
    Dotline.prototype.drawLine = function (dots) {
      var nowDot;
      var _that = this;
      //自己的思路：遍历两次所有的点，比较点之间的距离，函数的触发放在animate里
      this.dots.forEach(function (dot) {

        _that.move(dot);
        for (var j = 0; j < dots.length; j++) {
          nowDot = dots[j];
          if (nowDot === dot || nowDot.x === null || nowDot.y === null) continue;//continue跳出当前循环开始新的循环
          var dx = dot.x - nowDot.x,//别的点坐标减当前点坐标
            dy = dot.y - nowDot.y;
          var dc = dx * dx + dy * dy;
          if (Math.sqrt(dc) > Math.sqrt(_that.disMax)) continue;
          // 如果是鼠标，则让粒子向鼠标的位置移动
          if (nowDot.label && Math.sqrt(dc) > Math.sqrt(_that.disMax) / 2) {
            dot.x -= dx * 0.02;
            dot.y -= dy * 0.02;
          }
          var ratio;
          ratio = (_that.disMax - dc) / _that.disMax;
          _that.ctx.beginPath();
          _that.ctx.lineWidth = ratio / 2;
          _that.ctx.strokeStyle = 'rgba(' + _that.color + ',' + parseFloat(ratio + 0.2).toFixed(1) + ')';
          _that.ctx.moveTo(dot.x, dot.y);
          _that.ctx.lineTo(nowDot.x, nowDot.y);
          _that.ctx.stroke();//不描边看不出效果
        }
      });
    };
    //开始动画
    Dotline.prototype.start = function () {
      var _that = this;
      this.addDots();
      setTimeout(function () {
        _that.animate();
      }, 100);
    }
    window.Dotline = Dotline;
  }(window));
  //调用
  window.onload = function () {
    var w = window.innerWidth;
    var h = window.innerHeight;
    var dot = 100;
    var line = 100;
    if (w * h <= 853750) {
      dot = 125;
      line = 100;
    } else if (w * h > 853750 && w * h <= 1516893) {
      dot = 220;
      line = 125;
    } else {
      dot = 345;
      line = 150;
    }
    var dotline = new Dotline({
      dom: 'canvas',//画布id
      cw: w,//画布宽
      ch: h,//画布高
      ds: dot,//点的个数
      r: 0.5,//圆点半径
      cl: '#fff',//粒子线颜色
      dis: line//触发连线的距离
    }).start();
  }
</script>

</html>